<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世界新冠疫情可视化</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="header">
        <div class='image'>
            <img src="./img/logo.png" alt="">
        </div>
        <div class="font">
            <div class="font-C">世界新冠疫情可视化</div>
            <div class="font-E">shi jie xin guan yi qing ke shi hua</div>
        </div>
        <div class="time" id="time">2022-6-4</div>
    </div>
    <div class="box">
        <div class="divcontainer">
            <div class="left">
                <h3 style="text-align: center;">世界各国（前20）疫情情况</h3>
                <table>
                    <thead>
                        <tr>
                            <th>国家</th><th>累计确诊人数</th><th>死亡人数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>美国</td><td>86450603</td><td>1033369</td>
                        </tr>
                        <tr>
                            <td>印度</td><td>43171872</td><td>524651</td>
                        </tr>
                        <tr>
                            <td>巴西</td><td>31137479</td><td>667019</td>
                        </tr>
                        <tr>
                            <td>法国</td><td>29595892</td><td>148464</td>
                        </tr>
                        <tr>
                            <td>德国</td><td>26510828</td><td>139697</td>
                        </tr>
                        <tr>
                            <td>英国</td><td>22305893</td><td>178749</td>
                        </tr>
                        <tr>
                            <td>俄罗斯</td><td>18343964</td><td>379363</td>
                        </tr>
                        <tr>
                            <td>韩国</td><td>18141835</td><td>24229</td>
                        </tr>
                        <tr>
                            <td>意大利</td><td>17467642</td><td>166875</td>
                        </tr>
                        <tr>
                            <td>土耳其</td><td>15072747</td><td>98965</td>
                        </tr>
                        <tr>
                            <td>西班牙</td><td>12403245</td><td>106797</td>
                        </tr>
                        <tr>
                            <td>越南</td><td>10723673</td><td>43080</td>
                        </tr>
                        <tr>
                            <td>阿根廷</td><td>9230573</td><td>128889</td>
                        </tr>
                        <tr>
                            <td>日本</td><td>8893475</td><td>30677</td>
                        </tr>
                        <tr>
                            <td>荷兰</td><td>8090237</td><td>22325</td>
                        </tr>
                        <tr>
                            <td>澳大利亚</td><td>7377532</td><td>8662</td>
                        </tr>
                        <tr>
                            <td>伊朗</td><td>7232614</td><td>141321</td>
                        </tr>
                        <tr>
                            <td>哥伦比亚</td><td>6109105</td><td>139867</td>
                        </tr>
                        <tr>
                            <td>印度尼西亚</td><td>6056017</td><td>156604</td>
                        </tr>
                        <tr>
                            <td>波兰</td><td>6008295</td><td>116338</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="center">
                <div class="title">世界各国（前20）疫情可视化</div>
                <div id="acd6e47936424daeb269e14efabc58d4" class="chart-container" style="width:100%; height:480px;"></div>                
            </div>
            <div class="right">
                <div class="title">世界各国(前5)确诊人数情况</div>
                <div id="container" style="height: 260px; width: 350px;"></div>
                <div class="title2">世界各国(前5)死亡人数(单位:w)情况</div>
                <div id="container2" style="height: 260px; width: 350px;"></div>
            </div>
        </div>
        <div class="divbottom">
            <div></div>
            <div class="text">
                <div class="text1">***积极防护，保护自己，戴口罩，勤洗手***</div>
                <div class="text2">上百度APP搜索 新型冠状病毒肺炎</div>
                <div class="text3">了解最新进展及权威预防知识</div>
                <div class="text4"> <a href="#">帮助</a>｜<a href="#">举报</a>｜<a href="#">用户反馈</a></div>
            </div>
            <div></div>
        </div>
    </div>
    <script>
            var t = null;
            t = setTimeout(time, 1);
            function time() {
                clearTimeout(t);
                var myDate = new Date();
                year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
                month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
                month = month < 10 ? '0' + month : month;
                day = myDate.getDate(); //获取当前日(1-31)
                day = day < 10 ? '0' + day : day;
                hour = myDate.getHours(); //获取当前小时数(0-23)
                hour = hour < 10 ? '0' + hour : hour;
                minute = myDate.getMinutes(); //获取当前分钟数(0-59)
                minute = minute < 10 ? '0' + minute : minute;
                second = myDate.getSeconds(); //获取当前秒数(0-59)
                second = second < 10 ? '0' + second : second;
                document.getElementById('time').innerHTML = year +'-'+month+'-'+ day+'  '+hour+':'+minute+':'+second+ '&nbsp&nbsp&nbsp';
                t = setTimeout(time, 200);
            }
    </script>
    
</body>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/world.js"></script>
<script type="text/javascript" src="./worldmap.js"></script>
<script type="text/javascript" src="./pie-borderRadius.js"></script>
<script type="text/javascript" src="./bar-data-color.js"></script>
</html>